<template>
  <div class="fly-panel" style="margin-bottom: 0">
    <div class="fly-panel-title fly-filter">
      <a
        :class="{ 'layui-this': status === '' && tag === '' }"
        @click.prevent="search()"
        >综合</a
      >
      <span class="fly-mid"></span>
      <a :class="{ 'layui-this': status === '0' }" @click.prevent="search(0)"
        >未结</a
      >
      <!-- <a class="layui-this" @click.prevent="search(0)">未结</a> -->
      <span class="fly-mid"></span>
      <a :class="{ 'layui-this': status === '1' }" @click.prevent="search(1)"
        >已结</a
      >
      <span class="fly-mid"></span>
      <a
        :class="{ 'layui-this': status === '' && tag === '精华' }"
        @click.prevent="search(2)"
        >精华</a
      >
      <span class="fly-filter-right layui-hide-xs">
        <a
          :class="{ 'layui-this': sort === 'created' }"
          @click.prevent="search(3)"
          >按最新</a
        >
        <span class="fly-mid"></span>
        <a
          :class="{ 'layui-this': sort === 'answer' }"
          @click.prevent="search(4)"
          >按热议</a
        >
      </span>
    </div>
    <list-item :lists="lists" :isEnd="isEnd" @nextpage="nextPage()"></list-item>
  </div>
</template>

<script>
import { getList } from "@/api/content";
import ListItem from "./ListItem";
export default {
  name: "list",
  data () {
    return {
      current: "",
      isEnd: false,
      isRepeat: false,
      status: "",
      tag: "",
      sort: "created",
      page: 0,
      catalog: "",
      limit: 20,
      catalog: "",
      lists: [],
      isRepeat: false,
    };
  },
  components: {
    ListItem,
  },
  mounted () {
    let catalog = this.$route.params["catalog"];
    if (typeof catalog !== "undefined" && catalog !== "") {
      this.catalog = catalog;
    }
    this._getLists();
  },
  watch: {
    current (newval, oldval) {
      // console.log('current:' + oldval + ','+newval);
      this.init();
    },
    $route (newval, oldval) {
      let catalog = this.$route.params["catalog"];
      if (typeof catalog !== "undefined" && catalog !== "") {
        this.catalog = catalog;
      }
      this.init();
    },
  },
  methods: {
    init () {
      this.page = 0;
      this.lists = [];
      this.isEnd = false;
      this._getLists();
    },
    nextPage () {
      this.page++;
      this._getLists();
    },
    search (val) {
      if (typeof val === "undefined" && this.current === "") {
        return;
      }
      this.current = val;
      // console.log(val);
      switch (val) {
        case 0:
          this.status = '0';
          this.tag = '';
          break;
        case 1:
          this.status = '1';
          this.tag = '';
          break;
        case 2:
          this.status = '';
          this.tag = '精华';
          break;
        case 3:
          this.sort = 'created';
          break;
        case 4:
          this.sort = 'answer';
          break;
        default:
          this.status = '';
          this.tag = '';
          this.current = '';
      }
    },
    _getLists () {
      if (this.isRepeat) return;
      if (this.isEnd) return;
      this.isRepeat = true;
      let options = {
        catalog: this.catalog,
        isTop: 0,
        page: this.page,
        limit: this.limit,
        sort: this.sort,
        tag: this.tag,
        status: this.status,
        // lists: this.lists
      };
      getList(options)
        .then((res) => {
          //加锁防止用户多次点击
          this.isRepeat = false;
          if (res.code === 200) {
            // console.log(res.data);
            if (res.data.length < this.limit) {
              this.isEnd = true;
            }
            if (this.lists.length === 0) {
              this.lists = res.data;
            } else {
              this.lists = this.lists.concat(res.data);
            }
          }
        })
        .catch((err) => {
          console.log(err);
          this.isRepeat = false;
          if (err) {
            console.log(err);
            this.$alert(err.message);
          }
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.fly-panel-title a {
  cursor: pointer;
}
</style>
